<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hsiao-Notice Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./dist/jquery.min.js" type="text/javascript"></script>
        <script src="./dist/jquery.notice.min.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="./dist/hsiao.notice.css">
    </head>
    <body>
        <h1>Hsiao-Notice 0.2.0</h1>
        <p>Hsiao-Notice是一个轻量级的jQuery提示框插件，作用范围比较小，基本上我也不指望你们能够奋起而用之，反正也是我自己用的比较多，所以这个README就随便瞎写写了。目前Hsiao-Notice支持的参数有：</p>
        <blockquote>
              <p>type : 类型，包含三种，success/error/info</p>
              <p>message : 消息内容</p>
              <p>timeout : 维持时间，默认为1000秒，哦不，1000毫秒</p>
              <p>context : 页面元素，默认为body，算是挖个坑，以后会支持在任何指定的地方显示</p>
              <p>callback : 回调函数，如果不会用就关闭浏览器吧</p>
        </blockquote>
        <h4>基础用法如下：</h4>
        <code>
            $.notice({
                type:'success',
                message:'show me the notice'
            });
        </code>
        <h4>封装版用法如下：</h4>
        <code>
            HsiaoNotice.success('you click the success button');
        </code>
        <br />
        <code>
            HsiaoNotice.success('you click the success button',function(){
                console.log('I am back!');
            });
        </code>
        <h4>扩展用法（你可以增加使用几种属性）：</h4>
        <code>
            $.HsiaoNotice({
                type:'success',
                message:'show me the notice',
                timeout:2000,
                callback:function(){
                    console.log('I am back!');
                }
            });
        </code>
        <h6>补充说明</h6>
        <p><strong>context属性的设定</strong></p>
        <p>对于弹框的dom内容是通过js插入页面，我对插入的代码是以context为基准，默认是body，功能没有做完善，计划是可以根据context的不同，让弹框在自定的位置显示。</p>
        <p><strong>样式的说明</strong></p>
        <p>样式文件可以随便拿去用，没有路径指定，可以把CSS代码扒出来贴到你自己项目的CSS公共文件中。</p>
        <p><strong>修改保持时间</strong></p>
        <p>修改保持时间的语法适用于封装版</p>
        <code>
            HsiaoNotice.outtime(2000);
        </code>
        <h2>试一下（完整版）</h2>
        <div>
            <button class="success-notice">success</button>
            <button class="error-notice">error</button>
            <button class="info-notice">info</button>
        </div>
        <script>
            $('.success-notice').click(function(){
                $.HsiaoNotice({
                    type:'success',
                    message:'you click the success button'
                });
            });
            $('.error-notice').click(function(){
                $.HsiaoNotice({
                    type:'error',
                    message:'you click the error button'
                });
            });
            $('.info-notice').click(function(){
                $.HsiaoNotice({
                    type:'info',
                    message:'you click the info button'
                });
            });
        </script>
        <h2>试一下（封装版）</h2>
        <div>
            <button class="success-notice simple">success</button>
            <button class="error-notice simple">error</button>
            <button class="info-notice simple">info</button>
        </div>
        <script>
            HsiaoNotice.outtime(2000);
            $('.success-notice.simple').click(function(){
                HsiaoNotice.success('you click the success button');
            });
            $('.error-notice.simple').click(function(){
                HsiaoNotice.error('you click the error button');
            });
            $('.info-notice.simple').click(function(){
                HsiaoNotice.info('you click the info button');
            });
        </script>
        <br />
    </body>
</html>
